<template>
  <div id="prizeList">
    <div class="search-box">
      <el-form :inline="true" :model="searchParams" ref="ruleForm">
        <el-form-item label="一级分类：" prop="oneLevelClassify">
          <el-select
            v-model="searchParams.oneLevelClassify"
            placeholder="请选择"
            clearable
            @change="selectClassify"
          >
            <el-option
              v-for="item in oneLevelClassifyList"
              :key="item.classify"
              :label="item.name"
              :value="item.classify"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类：" prop="twoLevelClassify">
          <el-select
            v-model="searchParams.twoLevelClassify"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in twoLevelClassifyList"
              :key="item.classify"
              :label="item.name"
              :value="item.classify"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖品名称：" prop="awardName">
          <el-input
            v-model="searchParams.awardName"
            placeholder="请输入奖品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button type="success" icon="el-icon-search" @click="toSearch">
            查询
          </el-button>
          <el-button type="success" plain @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        @click="addEditPrize('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" max-height="470">
      <el-table-column label="序号" type="index" min-width="100" align="center">
      </el-table-column>
      <el-table-column label="一级分类" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.oneLevelClassify === 'ENABLE'">实物</span>
          <span v-else>虚拟</span>
        </template>
      </el-table-column>
      <el-table-column label="二级分类" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.twoLevelClassify === 'PHYSICALOBJECTS'"
            >实体物品</span
          >
          <span v-if="row.twoLevelClassify === 'JINGDONGECARD'">京东E卡</span>
          <span v-if="row.twoLevelClassify === 'DAPENGMALLVOUCHERS'"
            >大鹏商城券</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="奖品名称"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="奖品图片" min-width="110" align="center">
        <template slot-scope="{ row }">
          <listImgString v-if="row.img" :imgInfo="row.img"></listImgString>
          <template v-else>-</template>
        </template>
      </el-table-column>
      <el-table-column
        prop="value"
        label="价值"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="奖品状态" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.state | filterName('prize_state') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="updateBy.trueName"
        label="操作人"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" min-width="150">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.state === 'ENABLE'"
            type="text"
            @click="handlerPrize(row, 'disable')"
          >
            禁用
          </el-button>
          <el-button v-else type="text" @click="handlerPrize(row, 'enable')">
            启用
          </el-button>
          <el-button type="text" @click="addEditPrize('edit', row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <prizeDialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @searchList="searchList"
    ></prizeDialog>
  </div>
</template>

<script>
import prizeDialog from './prizeDialog'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import {
  getOneClass,
  getTowClass
} from '@/api/activityCenter/activityManage/common'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  props: ['params'],
  components: { prizeDialog, listImgString },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        activityId: '',
        activityType: '',
        oneLevelClassify: '',
        twoLevelClassify: '',
        awardName: '',
        pageNum: 1,
        pageSize: 10
      },
      oneLevelClassifyList: [],
      twoLevelClassifyList: [],
      editDialogData: { isShow: false }
    }
  },
  watch: {
    'params.activityId': {
      handler(val) {
        if (val) {
          this.searchParams.activityId = val
          this.params.getPrizeList(this.searchParams, (res) => {
            this.tableData = res.rows
            this.total = res.total
          })
        }
      },
      deep: true
    }
  },
  async mounted() {
    await sysNormalDisable('prize_state', 'prize_state')
    getOneClass({}, (res) => {
      this.oneLevelClassifyList = res
    })
    this.searchList()
  },
  methods: {
    /* 选择一级分类 */
    selectClassify(val) {
      this.twoLevelClassifyList = []
      this.searchParams.twoLevelClassify = ''
      getTowClass(val, {}, (res) => {
        this.twoLevelClassifyList = res
      })
    },
    /* 列表 */
    searchList() {
      this.searchParams.activityId = this.params.activityId
      this.searchParams.activityType = this.params.activityType
      if (this.params.activityId) {
        this.params.getPrizeList(this.searchParams, (res) => {
          this.tableData = res.rows
          this.total = res.total
        })
      }
    },
    /* 查询 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 重置 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.secondaryClassifyList = []
    },
    /* 新增配置 */
    addEditPrize(type, row) {
      const { addPrize, getPrizeDetail, editPrize } = this.params
      const obj = {
        type,
        isShow: true,
        oneLevelClassifyList: this.oneLevelClassifyList,
        activityId: this.searchParams.activityId,
        activityType: this.searchParams.activityType,
        addPrize,
        getPrizeDetail,
        editPrize
      }
      if (type === 'add') {
        this.editDialogData = obj
      } else {
        obj.id = row.id
        this.editDialogData = obj
      }
    },
    /* 启用禁用 */
    handlerPrize(row, state) {
      if (state === 'disable') {
        this.params.prizeDisable(row.id, {}, () => {
          this.searchList()
          this.$message.success('禁用成功')
        })
      } else {
        this.params.prizeEnable(row.id, {}, () => {
          this.searchList()
          this.$message.success('启用成功')
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.handlerButton {
  width: 300px;
  margin: 0 auto;
  .el-button {
    margin-right: 30px;
  }
}
</style>
